<template>
  <div class="root">
    <div class="step-content">
      <div class="step-card">
        <div class="step-item">
          <span class="step-number">1</span
          ><span class="step-title">基础信息</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <span class="step-number">2</span
          ><span class="step-title">匹配规则</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <span class="step-number step-active">3</span
          ><span class="step-title">产品分配</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <span class="step-number">4</span
          ><span class="step-title">活动设置</span>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <span class="step-number">5</span
          ><span class="step-title">发布确认</span>
        </div>
      </div>
    </div>
    <el-form label-position="top" :model="params">
      <div class="card">
        <div class="title-card">
          <div class="title">配置拍卖</div>
          <div class="extra" @click="handleCloseAll">
            全部收起
            <svg-icon icon-class="arrow_up" class="icon-24 icon-ml"></svg-icon>
          </div>
        </div>
        <el-collapse v-model="activeCollapse" class="collapse-content">
          <el-collapse-item
            :name="index"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <template #title>
              <div class="collapse-title">
                <div class="title-content">
                  <el-tag class="product-tag" type="info"
                    >{{ `商品${index + 1}` }}
                  </el-tag>
                  <span class="product-title span-ml">
                    {{ item.title }}
                  </span>
                  <el-divider direction="vertical" class="divider" />
                  <span class="span-ml">货量</span>
                  <el-tag class="span-ml" effect="dark"
                    >{{ `${item.total}箱` }}
                  </el-tag>
                  <el-divider direction="vertical" class="divider" />
                  <span class="span-ml">已分配货量</span>
                  <el-tag class="span-ml" effect="dark"
                    >{{ `${item.useTotal}箱` }}
                  </el-tag>
                  <el-divider direction="vertical" class="divider" />
                  <span class="span-ml">未分配货量</span>
                  <el-tag class="span-ml" effect="dark"
                    >{{ `${item.noUseTotal}箱` }}
                  </el-tag>
                </div>
                <div
                  class="title-extra"
                  @click.stop="handleAddGys(item.productId)"
                >
                  <svg-icon
                    icon-class="plus_gys"
                    class="icon-10 icon-mr"
                  ></svg-icon>
                  <span>添加供应商</span>
                </div>
              </div>
            </template>
            <div class="collapse-item">
              <!-- 表格数据 -->
              <el-table
                class="collapse-table"
                v-loading="loading"
                :data="item.productList"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="80"
                />
                <el-table-column label="经销商名称" prop="JxsName" />
                <el-table-column
                  label="货量设定(箱)"
                  align="center"
                  prop="total"
                  width="280"
                >
                  <template #default="scope">
                    <el-input-number
                      v-model="scope.row.total"
                      :min="1"
                      :max="99"
                  /></template>
                </el-table-column>
                <el-table-column
                  label="最小订货量(箱)"
                  prop="minNumber"
                  align="center"
                  width="280"
                >
                  <template #default="scope">
                    <el-input-number
                      v-model="scope.row.minNumber"
                      :min="1"
                      :max="99"
                  /></template>
                </el-table-column>
                <el-table-column
                  label="梯度价格规则"
                  prop="priceRule"
                  width="450"
                >
                  <template #default="scope">
                    <el-select
                      v-model="scope.row.priceRule"
                      placeholder="请选择梯度价格规则"
                      clearable
                    >
                      <el-option
                        v-for="dict in ruleList"
                        :key="dict.value"
                        :label="dict.name"
                        :value="dict.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  fixed="right"
                  class-name="small-padding fixed-width"
                  width="150"
                >
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      icon="Delete"
                      @click="handleDelete(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-form>
    <div class="footer" :class="classObj">
      <el-button type="primary" class="btn-back" @click="handleBack">
        返回
      </el-button>
      <div>
        <el-button @click="handleNextStep">下一步</el-button>
        <el-button>保存</el-button>
      </div>
    </div>
    <selectGys v-model="showGys" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import selectGys from "./components/selectGys.vue";
import useAppStore from "@/store/modules/app";
const showGys = ref(false);
const sidebar = computed(() => useAppStore().sidebar);
const classObj = computed(() => ({
  hideSidebar: !sidebar.value.opened,
}));
const router = useRouter();
const activeCollapse = ref([0]);
const params = ref({
  SKUtemplateId: 0,
  SKUcheckList: ["Gig4", "MM"],
  SKUrange: "≤",
  SKUyears: "",
  JXStemplateId: 0,
  JXScheckList: ["Gig4", "MM"],
  JXSrange: "≤",
  JXSyears: "",
  JXScomplateRange: "≥",
  JXScomplatePercent: "",
  JXSsaleRange: "≥",
  JXSsaleScore: "",
  sessionInterval: "",
  requestInterval: "",
});
const ruleList = ref([
  {
    name: "梯度折扣优惠95",
    value: 0,
  },
]);
const dataList = ref([]);
function getList() {
  let list = [];
  let productList = [];
  for (let i = 0; i < 3; i++) {
    const val = {
      productId: i + 1,
      JxsName:
        i === 0
          ? "上海利宝特食品有限公司"
          : i === 1
          ? "北京新加物体食品有限公司"
          : "广州一道天然食品有限公司",
      JxsScore: 95,
      total: 30,
      minNumber: 5,
      priceRule: 0,
    };
    productList.push(val);
  }
  for (let i = 0; i < 7; i++) {
    const product = {
      productId: i + 1,
      title: "新西兰进口 ps级 天然草饲 牛尾骨 - SKU20231110000" + (i + 1),
      total: 100,
      useTotal: 70,
      noUseTotal: 30,
      productList,
    };
    list.push(product);
  }
  dataList.value = list;
}
function handleCloseAll() {
  activeCollapse.value = [];
}
function handleAddGys(id) {
  showGys.value = true;
}
function handleNextStep() {
  router.push("/headquarters/auctioncenter/productdistribution");
}
function handleBack() {
  router.back();
}
getList();
</script>
<style lang="scss" scoped>
.root {
  padding-bottom: 64px;
  .icon-10 {
    width: 10px;
    height: 10px;
  }
  .icon-24 {
    width: 24px;
    height: 24px;
  }
  .icon-ml {
    margin-left: 5px;
  }
  .icon-mr {
    margin-right: 5px;
  }
  .step-content {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 20px 24px 0 24px;
    .step-card {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .step-item {
        .step-number {
          padding: 4px 8px;
          background-color: #ecedec;
          color: #000000;
          margin-right: 4px;
        }
        .step-active {
          background-color: #000000;
          color: #ffffff;
        }
        .step-title {
        }
      }
      .step-line {
        display: block;
        width: 30px;
        height: 1px;
        border: 1px solid #000000;
        margin: 0 8px;
      }
    }
  }

  .title-card {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #000000;
      line-height: 25px;
    }
    .extra {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
  .card {
    padding: 24px 24px 0 24px;
    // border-bottom: 1px solid #dadbda;
    .collapse-content {
      margin-top: 24px;
      border-bottom: none;
      ::v-deep(.el-input__wrapper) {
        background-color: #f4f4f4;
      }
      .collapse-title {
        height: 100%;
        width: 100%;
        .title-content {
          float: left;
          span {
            border-radius: 0;
          }
          .span-ml {
            margin: 0 10px;
          }
          .product-tag {
            background: #c4c4c4;
            color: #000000;
          }
          .product-title {
            margin: 0 10px;
            font-size: 16px;
            font-weight: 600;
            color: #000000;
            line-height: 22px;
          }
          .divider {
            border-left: 1px solid #000000;
          }
        }
        .title-extra {
          float: right;
          display: flex;
          align-items: center;
          color: #0b8c49;
          margin-right: 20px;
        }
      }
      .el-collapse-item {
        border: 1px solid #e7eaec;
        border-bottom: none;
        margin-bottom: 24px;
        ::v-deep(.el-collapse-item__header) {
          padding: 0 16px;
          background: #e8e9e8;
        }
      }
      .collapse-item {
        padding: 16px;
        .collapse-table {
          border: 1px solid #dadbda;
        }
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 200px;
    right: 0;
    height: 64px;
    background-color: #000000;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    button {
      padding: 0 26px;
      border-radius: 0;
    }
    .btn-back {
      border: 1px solid #ffffff;
    }
  }
  .hideSidebar {
    left: 54px !important;
  }
}
</style>
